import React, { Component } from 'react'
import { connect } from 'react-redux'
import { receiveHeader } from '../../redux/action'
import { Grid, List } from 'antd-mobile'
class HeaderSelector extends Component {
  constructor(props) {
    super(props)
    this.state = {
      icon: null
    }
    this.handleIconClick = this.handleIconClick.bind(this)
  }
  handleIconClick({ icon, id }) {
    this.setState({ icon })
    this.props.setHeader(id)
  }
  componentWillMount() {
    this.props.receiveHeader()
  }
  render() {
    const { initIcon } = this.props.user
    const { icon } = this.state
    const gridHeader = icon ? (
      <p className="header-img">
        已选择头像:
        <img src={icon} alt="header" />
      </p>
    ) : (
      '请选择头像'
    )
    return (
      <List renderHeader={() => gridHeader}>
        <Grid data={initIcon} columnNum={4} onClick={this.handleIconClick} />
      </List>
    )
  }
}

export default connect(
  state => state,
  { receiveHeader }
)(HeaderSelector)
